containerRelativeFrame#

Positions the view within an invisible frame whose size and position are relative to its nearest container. This modifier is especially useful when working with container views like ScrollView, Grid, or layout stacks to achieve proportional layout behavior.

Type#

1containerRelativeFrame?: {
2  axes: AxisSet
3  alignment?: Alignment
4  count: never
5  span: never
6  spacing: never
7} | {
8  axes: AxisSet
9  alignment?: Alignment
10  count: number
11  span?: number
12  spacing: number
13}

Description#

This modifier allows a view to size and position itself based on its container’s dimensions. It is often used to create layouts where the view should occupy a specific fraction of the available space or follow container-aligned scrolling behavior.

Properties#

• axes (AxisSet, required) The axes (horizontal, vertical, or all) along which to apply the relative sizing and positioning.

• alignment (Alignment, optional, default: "center") The alignment of the view within its container-relative frame.

• count (number, optional in second form) The number of equal-sized segments to divide the container's space into.

• span (number, optional, default: 1) The number of segments the view should span within the container.

• spacing (number, required in second form) The spacing between views laid out using this modifier.

Behavior#

There are two configuration modes:

1. Auto-Sizing Mode The view positions itself within a relative container frame without defining how the space is divided.

   1containerRelativeFrame={{
   2  axes: 'horizontal',
   3  alignment: 'leading'
   4}}

2. Grid-Like Division Mode The container is divided into equal parts, and each view can occupy one or more spans with spacing.

   1containerRelativeFrame={{
   2  axes: 'horizontal',
   3  count: 4,
   4  span: 2,
   5  spacing: 10
   6}}

Example#

1<HStack>
2  <Text
3    containerRelativeFrame={{
4      axes: 'horizontal',
5      count: 3,
6      span: 1,
7      spacing: 8,
8      alignment: 'center'
9    }}
10  >
11    One Third
12  </Text>
13</HStack>

This example places the text in a frame that takes up one-third of the container’s width with spacing of 8 points between items.

See Also#

• Apple Documentation
• Hacking with Swift: containerRelativeFrame